{% extends 'myadmin/index.html' %}
{% block con %}
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-tasks">
                    <div class="card-header ">
                        <h4 class="card-title">会员列表</h4>
                        <p class="card-category">To Do List</p>
                    </div>
                    <div class="search">
                       <form class="well form-inline margin-top-20" >
        请选择条件:
        <select class="form-control" name="types" style="width: 140px;">
       <option value="all" {% if request.GET.types == 'all' %} selected {% endif %}>全局搜索</option>
          <option value="phone" {% if request.GET.types == 'phone' %} selected {% endif %}>手机号</option>
          <option value="id" {% if request.GET.types == 'id' %} selected {% endif %}>ID</option>
          <option value="nikename" {% if request.GET.types == 'nikename' %} selected {% endif %}>昵称</option>
          <option value="email" {% if request.GET.types == 'email' %} selected {% endif %}>邮箱</option>
        </select>
        时间:
        <input class="form-control js-bootstrap-datetime" name="start_time" value="" style="width: 140px;" autocomplete="off" type="datetime">-
        <input class="form-control js-bootstrap-datetime" name="end_time" value="" style="width: 140px;" autocomplete="off" type="datetime"> &nbsp; &nbsp;
        关键字:
        <input class="form-control" name="keywords" value="{{ request.GET.keywords }}" style="width: 200px;" value="" placeholder="请输入关键字..." type="text">
        <input class="btn btn-primary" value="搜索" type="submit">
                           <input type="reset" value="清空" class="btn btn-danger">
    </form>
                    </div>
                    <div class="card-body ">
                        <p class="demo">
                            <a class="btn btn-success" href="{% url 'user_add' %}">添加</a>
                            <button type="button" class="btn btn-default" id="forbidden">禁用</button>

                            <button type="button" class="btn btn-primary" id="disforbidden">取消禁用</button>

                            <button type="button" class="btn btn-danger" id="del">删除</button>


                        </p>
                        <div class="table-full-width" id="#app">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input  select-all-checkbox" type="checkbox"
                                                       data-select="checkbox" data-target=".task-select">
                                                <span class="form-check-sign"></span>
                                            </label>
                                        </div>
                                    </th>
                                    <th>ID</th>
                                    <th>昵称</th>
                                    <th>性别</th>
                                    <th>手机号</th>
                                    <th>邮箱号</th>
                                    <th>年龄</th>
                                    <th>状态</th>
                                    <th style="text-align: center;">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {{uids}}
                                {% for v in userlist%}
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input task-select" type="checkbox"  value="{{v.id}}" name="checkedId" type="checkbox">
                                                <span class="form-check-sign"></span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>{{v.id}}</td>
                                    <td><img src="{{v.pic_url |default:'/static/uploads/avrite.jpg'}}" alt="" width="50"
                                             height="50" style="border-radius:50%"> {{v.nikename}}
                                    </td>
                                   <td>{% if v.sex == '0' %}
                                            女
                                        {% elif v.sex == '1' %}
                                            男
                                        {% else %}
                                            保密
                                        {% endif%}</td>
                                    <td>{{v.phone}}</td>
                                    <td>{{v.email}}</td>
                                    <td>{{v.ages}}</td>
                                    <td> <select uid="{{ v.id }}" id="select-status{{ v.id }}" class="select-status" {% if v.status == 0 %} style='color:green;' {% else %} style='color:red;'{% endif%}>
                                            <option value="0" {% if v.status == 0 %} selected {% endif %}>正常</option>
                                            <option value="1" {% if v.status == 1 %} selected {% endif %}>禁用</option>
                                        </select></td>
                                    <td class="td-actions text-right">
                                        <div class="form-button-action" style="width:60%; margin:0 auto">
                                            <a href="{% url 'user_edit'%}?uid={{v.id}}"  data-toggle="tooltip" title="Edit Task"
                                                    class="btn btn-link btn-simple-primary">
                                                <i class="la la-edit"></i>
                                            </a>
                                            <a href="{% url 'user_del'%}?uid={{v.id}}" data-toggle="tooltip" title="Remove"
                                                    class="btn btn-link btn-simple-danger">
                                                <i class="la la-times"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}

                                </tbody>
                            </table>

                        </div>

                    </div>
                    <div class="card-footer ">
                        <div class="stats">
                            <i class="now-ui-icons loader_refresh spin"></i>                     <div class="card-body">

                                <ul class="pagination pg-primary">

                                {% load pagetag %}

                                {% showpage userlist.paginator.num_pages request %}
                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
<script src="/static/myadmin/assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

    $("#forbidden").click(function() {
        var obj=$("input[name='checkedId']");
        var length = obj.length;
        ids = [];
            for (var i = 0; i < length; i++) {
                if(obj[i].checked)
                   ids.push(obj[i].value);
            }

        console.log(ids)
        $.get('{% url 'user_set_manystatus' %}',{'ids':ids,'status':1},function(data){
            if(data.code===0){
            alert(data.msg);
            window.location.reload()
            }

        },'json')
    });

$("#disforbidden").click(function() {
        var obj=$("input[name='checkedId']");
        var length = obj.length;
        ids = [];
            for (var i = 0; i < length; i++) {
                if(obj[i].checked)
                   ids.push(obj[i].value);
            }

        $.get('{% url 'user_set_manystatus' %}',{'ids':ids,'status':0},function(data){
            if(data.code===0){
            alert(data.msg);
            window.location.reload()
            }

        },'json')
    });

$("#del").click(function() {
        var obj=$("input[name='checkedId']");
        var length = obj.length;
        ids = [];
            for (var i = 0; i < length; i++) {
                if(obj[i].checked)
                   ids.push(obj[i].value);
            }

        console.log(ids)
        $.get('{% url 'user_set_manystatus' %}',{'ids':ids,'status':2},function(data){
            if(data.code===0){
            alert(data.msg);
            window.location.reload()
            }

        },'json')
    });

    $('.select-status').change(function(){
        // 获取当前元素的 值
        var status = $(this).val()
        // 获取当前元素的 uid
        var uid = $(this).attr('uid')
        //
        var that = $(this)
        // 发送ajax请求.修改状态
        $.get('{% url 'user_set_status' %}',{'uid':uid,'status':status},function(data){
            // 判断当前的返回值
            if(data['code'] == 0){
                that.css("color:green;")
                alert(data['msg'])
            }
        },'json')

    })

</script>
{% endblock %}